{% extends 'base.html' %}
{% load horizon %}
{% load i18n %}
{% block main %}
    <form action="{% url 'horizon:ratingfunction:billing:index' %}" method="post">
        {% csrf_token %}
        <div class="container-fluid bg">
            <div class="nav-progress">
                <span class="active">1</span>
                <span class="active-text">基础配置</span>
                <span class="line"></span>
                <span class="no-active">2</span>
                <span class="no-active-text">网络设置</span>
                <span class="line"></span>
                <span class="no-active">3</span>
                <span class="no-active-text">高级设置</span>
                <span class="line"></span>
                <span class="no-active">4</span>
                <span class="no-active-text">确认设置</span>
            </div>
            {% block availble_nova %}
                {% include "ratingfunction/billing/basic_setting/_availble_nova.html" %}
            {% endblock %}

            {% block flavor_charging %}
                {% include "ratingfunction/billing/basic_setting/_flavor_charging.html" %}
            {% endblock %}
            {% block images_list %}
                {% include "ratingfunction/billing/basic_setting/_images_list.html" %}
            {% endblock %}
            {% block volume_size %}
                {% include "ratingfunction/billing/basic_setting/_volume_size.html" %}
            {% endblock %}
        </div>

        {% block instance_count_button %}
            {% include "ratingfunction/billing/basic_setting/_instance_count_button.html" %}
        {% endblock %}
    </form>
    <script>
        {# 处理卷大小的按钮 #}
        volumeSize = $("#volume_size")
        $("#volume_min").on("click", function () {
            if (parseInt(volumeSize.val()) > 1) {
                volumeSize.val(parseInt(volumeSize.val()) - 1)
            } else {
                $("#min").attr("disabled", "disabled")
            }
            setTotal();
        })
        $("#volume_max").on("click", function () {
            volumeSize.val(parseInt(volumeSize.val()) + 1);
            $("#min").removeAttr("disabled");
            setTotal();
        })
        {#处理主机数量的大小#}
        var intanceCount = $("#intance_count");
        $("input[name='flavor_id']").on("click", function () {
            setTotal()
        })
        $("#instance_min").on("click", function () {
            if (parseInt(intanceCount.val()) > 1) {
                intanceCount.val(parseInt(intanceCount.val()) - 1)
            } else {
                $("#min").attr("disabled", "disabled")
            }
            setTotal();
        })
        $("#instance_max").on("click", function () {
            intanceCount.val(parseInt(intanceCount.val()) + 1);
            $("#min").removeAttr("disabled");
            setTotal();
        })

        function setTotal() {
            $("input[name='flavor_id']").each(function () { //遍历checkbox的选择状态
                if ($(this).prop("checked")) { //如果值为checked表明选中了
                    var money = $(this).parents("tr").find("#money").html();
                    var disk = $(this).parents("tr").find("#disk").html();
                    var intanceCount = $("#intance_count").val();
                    var volumeSize = $("#volume_size").val();
                    var moneyStr = money.split(" ");
                    var diskStr = disk.split(" ");
                    if (parseInt(volumeSize) > parseInt(diskStr[0])) { // 用户选择的卷大于每种规格的硬盘大小时需要计费
                        var volumeMoney = parseInt(volumeSize - diskStr[0]) * 0.001//用户选择增加的系统盘比规格的系统盘大要计费
                        var singleMoney = parseFloat(moneyStr[0]) + parseFloat(volumeMoney) //一个主机的每小时收费
                        var totalMoney = singleMoney * intanceCount;
                        var totalMoneyResult = totalMoney.toFixed(3);//保留小数点后面3位
                        $("#total_money").text("￥" + totalMoneyResult + "元/小时");//给界面传值
                        $("#single_money").val(singleMoney);//给input传值，后面传值到后端
                    } else {
                        var totalMoney = moneyStr[0] * intanceCount;
                        var totalMoneyResult = totalMoney.toFixed(3);//保留小数点后面3位
                        $("#total_money").text("￥" + totalMoneyResult + "元/小时");
                        $("#single_money").val(moneyStr[0]);
                    }
                }
            });
        }

    </script>
{% endblock %}



